<!--
 * new page
 * @author: YK
 * @since: 2024-01-19
 * index.vue
-->
<template>
  <div class="container">
    <el-button type="primary" @click="open">open</el-button>
    <m-modal-form
      width="700"
      :onSuccess="onSuccess"
      v-model:visiable="visiable"
      :options="options"
      :isScoroll="true"
    >
      <template #header>
        <div>编辑</div>
      </template>
      <div>ewrwer</div>
      <template #footer="{ form }">
        <el-button type="primary" @click="ok(form)">确定</el-button>
        <el-button>取消</el-button>
      </template>
      <template #uploadArea>
        <el-button type="primary">点击上传</el-button>
      </template>
      <template #tip>
        <div style="color: #ccc; font-size: 12px">
          jpg/png files with a size less than 500KB.
        </div>
      </template>
    </m-modal-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FormOptions } from "../../components/form/src/types/types";

interface formData {
  getFormDate: () => { [key: string]: any };
  validate: () => Promise<boolean>;
  resetForm: () => void;
}
const visiable = ref(false);
const open = () => {
  visiable.value = true;
};
let options = ref<FormOptions[]>([
  {
    type: "input",
    value: "",
    label: "用户名",
    prop: "username",
    rules: [
      { required: true, message: "请输入用户名", trigger: "blur" },
      { min: 2, max: 6, message: "用户名为2-6", trigger: "blur" },
    ],
  },
  {
    type: "input",
    value: "",
    label: "密码",
    prop: "password",
    rules: [
      { required: true, message: "请输入用户密码", trigger: "blur" },
      { min: 6, max: 15, message: "用户密码为6-15位", trigger: "blur" },
    ],
    attrs: {
      showPassword: true,
    },
  },
  {
    type: "select",
    value: "3",
    placeholder: "请选择职业",
    prop: "role",
    label: "职位",
    rules: [{ required: true, message: "请选择职业", trigger: "blur" }],
    attrs: {
      style: { width: "100%" },
    },
    children: [
      {
        type: "option",
        label: "经理",
        value: "1",
      },
      {
        type: "option",
        label: "主管",
        value: "2",
      },
      {
        type: "option",
        label: "专员",
        value: "3",
      },
    ],
  },
  {
    type: "checkbox-group",
    value: [],
    prop: "like",
    label: "爱好",
    rules: [{ required: true, message: "请选择爱好", trigger: "blur" }],
    children: [
      { type: "checkbox", label: "篮球", value: 1 },
      { type: "checkbox", label: "足球", value: 2 },
      { type: "checkbox", label: "游泳", value: 3 },
    ],
  },
  {
    type: "radio-group",
    value: "",
    prop: "gender",
    label: "性别",
    rules: [{ required: true, message: "请选择性别", trigger: "blur" }],
    children: [
      { type: "radio", label: "男", value: 1 },
      { type: "radio", label: "女", value: 2 },
      { type: "radio", label: "保密", value: 3 },
    ],
  },
  {
    type: "upload",
    prop: "avatar",
    label: "上传",
    uploadAttrs: {
      action: "https://jsonplaceholder.typicode.com/posts/",
      multiple: true,
      limit: 3,
    },
  },
  {
    type: "editor",
    value: "",
    prop: "desc",
    label: "描述",
    rules: [{ required: true, message: "请输入描述", trigger: "blur" }],
    editorattrs: {
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            server: "http://localhost:3000/upload",
            fieldName: "file",
            maxFileSize: 3 * 1024 * 1024, // 设置图片最大为 3M
          },
        },
      },
      toolbarConfig: {},
      editorStyle: { border: "1px solid #ccc", height: "500px" },
      toolbarStyle: {},
    },
  },
]);
let model = ref<formData | {}>({});
const ok = async (form: formData) => {
  const res = await form.validate();
  if (res) {
    model.value = form.getFormDate();
    console.log(model.value, "???");
  }
};
const onSuccess = (res: File) => {
  console.log(res, "上传成功333");
};
</script>

<style scoped lang="scss"></style>
